<template>
  <view class="page container">
    <u-form
      :model="basicForm"
      :rules="rules"
      labelPosition="top"
      ref="form"
      labelWidth="auto"
      :labelStyle="{
        fontSize: '14px',
        color: '#B2B2B2',
        lineHight: '20px'
      }"
    >
      <view class="basic-style">
        <u-form-item label="合同款项" prop="contractPayment" required>
          <h-select-input-tag
            class="w-100"
            v-model="basicForm.contractPayment"
            objectField="basicForm.contractPayment"
            placeholder="请选择合同款项"
            border="surround"
						suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"
            dictName="contract_payment"
          ></h-select-input-tag>
        </u-form-item>
        <u-form-item label="付款比例（%）" prop="ratioPayment" required style="position: relative">
          <u--input type="number" placeholder="请输入付款比例" v-number-normal v-model="basicForm.ratioPayment" @blur="inputTaxRateBlur" />
          <span class="percent" style="position: absolute; right: 1em">%</span>
        </u-form-item>
        <u-form-item label="付款金额（元）" prop="paymentAmount" required>
					<h-number-input placeholder="请输入付款金额(元)" v-model="basicForm.paymentAmount" :digit="2" :min="0"></h-number-input>
        </u-form-item>
        <u-form-item label="备注" prop="remark">
          <u--textarea confirm-type="send" v-model="basicForm.remark" count placeholder="请输入备注" maxlength="500"></u--textarea>
        </u-form-item>
      </view>

      <view class="space-x-1 mt-1" style="display: flex">
        <u-button type="primary" text="保存" :loading="loading" @click="onSubmit"></u-button>
        <u-button type="primary" text="关闭" :loading="loading" @click="onClose"></u-button>
      </view>
    </u-form>
  </view>
</template>

<script>
export default {
  name: 'FormC',
  props: {
    teamId: {
      type: String,
      default: ''
    },
    companyId: {
      type: String,
      default: ''
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    datailDisabled: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      ratioPaymentNum: 100,
      basicForm: {
        contractPayment: '',
        ratioPayment: '',
        paymentAmount: '',
        remark: '',
      },
      rules: {
        contractPayment: [{ required: true, message: '请选择合同款项!', trigger: 'change' }],
        ratioPayment: [
          { required: true, message: '请输入付款比例!', trigger: 'blur' },
          {
            required: true,
            pattern: /^(0(\.\d{1,2})?|[1-9]\d*(\.\d{1,2})?)$/,
            message: '请输入正确的比例（保留两位小数）!',
            trigger: ['blur', 'change']
          },
        ],
        paymentAmount: [
          { required: true, type: 'number', message: '请输入付款金额!', trigger: ['blur', 'change'] },
          { required: true, pattern: /^(0(\.\d{1,2})?|[1-9]\d*(\.\d{1,2})?)$/, message: '付款金额只可保留两位小数!', trigger: ['blur', 'change'] },
        ],
      },
    }
  },
  created() {},
  methods: {
		// 获取付款比例
		calculateRatioPayment (value) {
			this.$nextTick(() => {
				if (value) {
					this.ratioPaymentNum = (100 - Number(value)) // 计算还剩余多少比例
					if (this.ratioPaymentNum) {
						this.ratioPaymentNum = this.ratioPaymentNum.toFixed(2)
						this.ratioPaymentNum = Number(this.ratioPaymentNum)
					}
				} else {
					this.ratioPaymentNum = 100
				}
			})
		},
    // 税率输入框变化时
    inputTaxRateBlur(value) {
      const num = this.basicForm.ratioPayment.toString()
      if (num >= 0 && num <= this.ratioPaymentNum) {
        this.basicForm.ratioPayment = num.toString()
      }
      if (num < 0) {
        this.basicForm.ratioPayment = '0'
      }
      if (num > this.ratioPaymentNum) {
        this.basicForm.ratioPayment = this.ratioPaymentNum.toString()
        this.$u.toast('付款信息列表中付款总比例不能超过100%！')
      }
    },
    reset() {
      this.$refs.form.resetFields()
    },
    async onSubmit() {
      await this.$refs.form.validate()
			if(this.loading) return
			this.loading = true
      if (!this.index) {
        this.$emit('submit', [
          {
            id: parseInt(Math.random() * 1000000000000),
            ...this.basicForm,
          },
          this.index,
        ])
      } else {
        this.$emit('submit', [this.basicForm, this.index])
      }
    },
    onClose() {
			this.loading = false
      this.$emit('close')
    },
  }
}
</script>

<style scoped></style>
